<script setup lang="ts">
	import { useApartmentList } from '@/composables'
	import { useMemberStore } from '../../stores'
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const { apartmentRef, onScrolltolower } = useApartmentList()
	// 获取会员信息
	const memberStore = useMemberStore()
	console.log(memberStore.profile)
	const goNegv = (path : string) => {
		console.log(path)
		uni.navigateTo({
			url: path
		});
	};
</script>

<template>
	<scroll-view enable-back-to-top @scrolltolower="onScrolltolower" class="viewport" scroll-y>
		<!-- 个人资料 -->
		<view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
			<!-- 情况1：已登录 -->
			<view class="overview" v-if="memberStore.profile">
				<navigator url="/pages/mine/userInfo" hover-class="none">
					<image class="avatar" :src="memberStore.profile.userInfo.avatar" mode="aspectFill"></image>
				</navigator>
				<view class="meta">
					<view class="nickname">
						{{ memberStore.profile.userInfo.nickname}}
					</view>
					<view>
						{{ memberStore.profile.userInfo.phone }}
					</view>
					
				</view>
			</view>
			<!-- 情况2：未登录 -->
			<view class="overview" v-else>
				<view class="meta">
					<navigator url="/pages/login/login" hover-class="none" class="nickname">
						未登录
					</navigator>
					<view @tap="goNegv('/pages/login/login')" hover-class="none" class="nickname"
						style="font-size: 26rpx">
						点击登录账号
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="orders">
			<view class="title"> 功能 </view>
			<view class="section">
				<navigator :url="memberStore.profile ? '/pages/mine/userInfo' : '/pages/login/login'"
					class="navigator icon-gerenzhongxin-zhihui" hover-class="none">
					个人信息
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/signup/mySignup' : '/pages/login/login'"
					class="navigator icon-qianshuxieyi" hover-class="none">
					我的签约
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/booking/myBooking' : '/pages/login/login'"
					class="navigator icon-ico_yuyueguanli_fangjianyuyue" hover-class="none">
					我的预约
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/repair/myRepair' : '/pages/login/login'"
					class="navigator icon-baoxiu" hover-class="none">
					我的报修
				</navigator>

			</view>
			<view class="section">
				<navigator :url="memberStore.profile ? '/pages/feedback/feedBack' : '/pages/login/login'"
					class="navigator icon-fenxiang" hover-class="none">
					意见反馈
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/authentication/authentication' : '/pages/login/login'"
					class="navigator icon-anquanbaozhang" hover-class="none">
					实名认证
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/collection/collection' : '/pages/login/login'"
					class="navigator icon-shoucang" hover-class="none">
					我的收藏
				</navigator>
				<navigator :url="memberStore.profile ? '/pages/history/history' : '/pages/login/login'"
					class="navigator icon-shijian" hover-class="none">
					历史记录
				</navigator>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="guess">
			<XtxRecommendApartment ref="apartmentRef" />
		</view>
	</scroll-view>
</template>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	.viewport {
		height: 100%;
		background-repeat: no-repeat;
		background-image: url(https://shai.oss-cn-beijing.aliyuncs.com/images/center_bg.png);
		background-size: 100% auto;
	}

	/* 用户信息 */
	.profile {
		margin-top: 30rpx;
		position: relative;

		.overview {
			display: flex;
			height: 120rpx;
			padding: 0 36rpx;
			color: #fff;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			filter: grayscale(100%);
		}

		.meta {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			line-height: 30rpx;
			padding: 16rpx 0;
			margin-left: 20rpx;
		}

		.nickname {
			max-width: 180rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.extra {
			display: flex;
			font-size: 20rpx;
		}

		.tips {
			font-size: 22rpx;
		}

		.update {
			padding: 3rpx 10rpx 1rpx;
			color: rgba(255, 255, 255, 0.8);
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 10rpx;
			border-radius: 30rpx;
		}

		.settings {
			position: absolute;
			bottom: 0;
			right: 40rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	/* 我的订单 */
	.orders {
		position: relative;
		z-index: 99;
		padding: 30rpx;
		margin: 50rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.title {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #1e1e1e;

			.navigator {
				font-size: 24rpx;
				color: #939393;
				float: right;
			}
		}

		.section {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			padding: 40rpx 20rpx 10rpx;
			justify-content: space-around;

			.navigator,
			.contact {
				text-align: center;
				font-size: 24rpx;
				color: #333;
				margin-right: 20px;

				&::before {
					display: block;
					font-size: 60rpx;
					color: #ff9545;
				}

				&::after {
					border: none;
				}
			}

			.contact {
				padding: 0;
				margin: 0;
				border: 0;
				background-color: transparent;
				line-height: inherit;
			}
		}
	}

	/* 猜你喜欢 */
	.guess {
		background-color: #f7f7f8;
		margin-top: 20rpx;
	}
</style>